import { createRouter, createWebHashHistory } from "vue-router";
import { useUserStore } from "../store/userStore";
import { ElMessage } from "element-plus";

// 布局组件
const Layout = () => import("@/layout/LayOut.vue");

// 懒加载组件
const Home = () => import("@/pages/Index/IndexPage.vue");
const About = () => import("@/pages/Index/AboutMe.vue");
const Login = () => import("@/components/loginPageCopy.vue");
const Register = () => import("@/pages/User/RegisterPage.vue");

// 测试组件
// const Test = () => import("@/components/test/axiostest.vue");
const echarts = () => import("@/components/test/ApacheTest.vue");

// 用户相关组件
const UserPage = () => import("@/pages/User/PersonalHomepage.vue");
const UserProfile = () => import("@/pages/User/ProfilePage.vue");
const UserSettings = () => import("@/pages/User/SettingPage.vue");

// 社区相关组件
const Community = () => import("@/pages/common/CommunityPage.vue");
const PostDetail = () => import("@/pages/common/PostDetailPage.vue");
const CreatePost = () => import("@/pages/common/CreatePostPage.vue");

// 管理员相关组件
// const AdminLayout = () => import("@/pages/admin/AdminLayout.vue");
// const AdminDashboard = () => import("@/pages/admin/DashboardPage.vue");
// const AdminUsers = () => import("@/pages/admin/UsersManagePage.vue");
// const AdminPosts = () => import("@/pages/admin/PostsManagePage.vue");

const routes = [
  {
    path: "/",
    component: Layout,
    children: [
      { path: "", component: Home, name: "Home" },
      { path: "about", component: About, name: "About" },

      // 社区相关路由
      {
        path: "community",
        component: Community,
        name: "Community",
      },
      {
        path: "post/:id",
        component: PostDetail,
        name: "PostDetail",
        props: true,
      },
      {
        path: "create-post",
        component: CreatePost,
        name: "CreatePost",
        meta: { requiresAuth: true },
      },

      // 用户相关路由
      {
        path: "user",
        component: UserPage,
        name: "UserPage",
        meta: { requiresAuth: true },
        children: [
          {
            path: "profile",
            component: UserProfile,
            name: "UserProfile",
          },
          {
            path: "settings",
            component: UserSettings,
            name: "UserSettings",
          },
          {
            path: "",
            redirect: "profile",
          },
        ],
      },
    ],
  },

  // 登录注册路由
  { path: "/login", component: Login, name: "Login" },
  { path: "/register", component: Register, name: "Register" },

  // 管理员路由
  // {
  //   path: "/admin",
  //   component: AdminLayout,
  //   name: "AdminLayout",
  //   meta: { requiresAuth: true, requiresAdmin: true },
  //   children: [
  //     {
  //       path: "",
  //       component: AdminDashboard,
  //       name: "AdminDashboard",
  //     },
  //     {
  //       path: "users",
  //       component: AdminUsers,
  //       name: "AdminUsers",
  //     },
  //     {
  //       path: "posts",
  //       component: AdminPosts,
  //       name: "AdminPosts",
  //     },
  //   ],
  // },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 路由守卫，权限验证
router.beforeEach((to, from, next) => {
  const userStore = useUserStore();

  // 登录和注册页面直接放行
  if (to.path === "/login" || to.path === "/register") {
    next();
    return;
  }

  // 需要登录的页面
  if (to.meta.requiresAuth) {
    if (!userStore.token) {
      ElMessage.warning("请先登录");
      next("/login");
      return;
    }

    // 需要管理员权限的页面
    if (to.meta.requiresAdmin) {
      if (userStore.userInfo?.role !== "admin") {
        ElMessage.error("您没有管理员权限");
        next("/");
        return;
      }
    }
  }

  // 其他情况放行
  next();
});

export default router;
